<template>
  <div>
      <h1>ajax模拟请求数据</h1>
      <hr>
      <ul>
          <li v-for="(item,index) in userlist" :key="index" class="box_li"> 名字：<span>{{item.username}}</span>年龄：<span>{{item.age}}</span>
              <div>
                  <button @click="deleteuser(item,index)">删除</button>
              <button @click="setuser(item,index)">修改</button>
              </div>
          </li>
      </ul>
      <div>
          姓名：<input type="text" v-model="user_add.username" placeholder="请输入名字"><br>
          年龄：<input type="text" v-model.number="user_add.age" placeholder="请输入年龄"><br>
          爱好：<input type="text" v-model="user_add.hoppy" placeholder="请输入爱好"><br>
          <button @click="adduser">提交</button>
      </div>
  </div>
</template>

<script>
export default {
data() {
    return {
        userlist:[],
        user_add:{}
    }
},
created() {
    this.getuser()
},
methods: {
    adduser(){
         $.ajax({
                url:"http://192.168.57.5:5555/user",
                type:"post",
                data:this.user_add,
                success:res=>{
                    console.log(res)
                this.user_add={}
                   this.getuser()
                }
            })
    },
    getuser(){
         $.ajax({
                url:"http://192.168.57.5:5555/user",
                type:"get",
                success:res=>{
                    console.log(res)

                    this.userlist = res 
                }
            })
    },
    deleteuser(item,index){
        let flag= confirm("确定删除嘛~~~");
       if(flag){
            $.ajax({
                    url:"http://192.168.57.5:5555/user/"+item.id,
                    type:"delete",
                    success:res=>{
                    this.userlist.splice(index,1)
                    }
                 })
       }
       
    },
    setuser(item,index){
        let word=prompt("请输入密码")
        if(word=="我是傻瓜"){
            alert("嗯，你是傻瓜");
            let value=prompt("修改你的年龄",item.age)
        console.log(value);
            $.ajax({
            url:"http://192.168.57.5:5555/user/"+item.id,
            type:"patch",
            data:{
                age:value
            },
            success:res=>{
            item.age=value
            this.userlist.splice(index,1,item)
             }

        })
        }
        else if(word==""||word==null){
        alert("密码是'我是傻瓜'")
        }
        else{
            alert("密码错误哦")
        }
        
        
    
    }
},

mounted() {  
            // $.ajax({
            //     url:"http://192.168.57.5:5555/user",
            //     type:"get",
            //     success:res=>{
            //         console.log(res)
            //         this.userlist = res 
            //     }
            // })
},
}
</script>

<style lang="css" scoped>
.box_li{
    width: 550px;
    height: 30px;
    line-height: 30px;
    border: 1px solid black;
    list-style: none;
    box-sizing: border-box;
    padding: 0px 20px 0px 10px ;
    display: flex;
    justify-content: space-between;
}
.box_li span{
    overflow: hidden;
    width: 150px;
    display: inline-block;
    
    color: red;
}
</style>